<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类页</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div class="fix-title">
        <span>分类</span>
        <div class="text"><a href="search.html">搜索</a></div>
    </div>
    <ul class="cate-list">
<!--        <li><a href="list.html" data-id="1">分类1</a></li>-->
<!--        <li><a href="list.html" data-id="2">分类2</a></li>-->
<!--        <li><a href="list.html" data-id="3">分类3</a></li>-->
<!--        <li><a href="list.html" data-id="4">分类4</a></li>-->
<!--        <li><a href="list.html" data-id="5">分类5</a></li>-->
    </ul>
    <script src="../axios.js"></script>
    <script>

        // 设置请求根路径
        axios.defaults.baseURL = "http://124.223.14.236:3001/api"

        // $.ajax({
        //     method: 'GET',
        //     url: 'http://124.223.14.236:3001/api/goods/cate',
        //     success: function ({ data }) {
        //         console.log(data)
        //         data.forEach(item => {
        //             const { id, name } = item
        //             $('.cate-list').append(`<li><a href="list.html" data-id="${id}">${name}</a></li>`)
        //         });
        //     }
        // })
        //
        // $(".cate-list").on("click", function (e){
        //     // e.preventDefault()
        //     if(e.target.tagName === "A") {
        //
        //         localStorage.setItem("cate_id", e.target.getAttribute('data-id'))
        //     }
        // })
        const list = document.querySelector(".cate-list")
        async function fn(){
            const {data: {data}} = await axios("/goods/cate")
            console.log(data);
            const str = data.map(item =>{
                const { id, name } = item
                return `
                 <li><a href="list.html" data-id="${id}">${name}</a></li>
                `
            }).join("")
            list.innerHTML = str
        }
        fn()
        
        list.addEventListener("click", function(e){
            // e.preventDefault()
            if(e.target.tagName === "A"){
                localStorage.setItem("cate_id", e.target.getAttribute('data-id'))
            }
        })

    </script>
</body>

</html>